<script setup lang="js">
import {computed, defineProps} from 'vue'
import {divisionMap, rankQueueMap, tierMap} from "@/renderer/share/utils/constants.js";
import LcuTierIcon from "@/renderer/main-window/components/lcu/LcuTierIcon.vue";

const {rankInfo} = defineProps({
  "rankInfo": {}
})


const winRate = computed(() => {
  return (rankInfo?.wins / (rankInfo?.losses + rankInfo?.wins)).toFixed(3)
})

const totalGameRecordNums = computed(() => {
  return rankInfo?.losses + rankInfo?.wins;
})
</script>


<template>
  <div>
    <el-card header-class="el-card_header_toolkit"
             shadow="hover"
    >
      <template #header>
        <el-text>{{ rankQueueMap[rankInfo?.queueType] }}</el-text>
      </template>
      <div style="display: flex">
       <div style="display: flex;flex-direction: column;margin: 0 3px;align-items: center">
         <LcuTierIcon
             :tier-level="tierMap[rankInfo.tier||'None']?.icon"
         />
         <el-text size="small">{{tierMap[rankInfo.tier||'None']?.value}}{{divisionMap[rankInfo.division]}}</el-text>
       </div>

        <div style="display: flex;flex-direction: column;text-align: center;justify-content: center">
          <div>
            <el-text size="large">{{ rankInfo?.currentRankLevel }}</el-text>
          </div>
          <div>
            <el-text size="default">{{ `${winRate * 100}%` }}/{{
                totalGameRecordNums
              }}场次
            </el-text>
          </div>
<!--          <div>-->
<!--            <el-text size="small">{{  tierMap[rankInfo.highestTier||'None']?.value }}</el-text>-->
<!--          </div>-->
          <div>
            <el-text size="small">{{rankInfo.leaguePoints}}胜点</el-text>
          </div>
        </div>
      </div>

    </el-card>
  </div>

</template>

<style scoped>
:deep(.el-card__header) {
  padding: 0;
}

:deep(.el-card__body) {
  padding: 0;
}

:deep(.el-card_header_toolkit) {
  text-align: center;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>